$page-width=1280px
$page-margin=87px
$z-index-highest=9999
$z-index-second-highest=5000

// -- Animation
$animation-duration=.35s
$animation-delay=$animation-duration / 5
$animation-curve-fast-out-slow-in=cubic-bezier(0.4, 0, 0.2, 1)
$animation-curve-linear-out-slow-in=cubic-bezier(0, 0, 0.2, 1)
$animation-curve-fast-out-linear-in=cubic-bezier(0.4, 0, 1, 1)
$animation-curve-default=$animation-curve-fast-out-slow-in

$zdepth-shadow-1=0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
$zdepth-shadow-2=0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
$zdepth-shadow-3=0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
$zdepth-shadow-4=0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
$zdepth-shadow-5=0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)

// -- Title
h1=30px
h2=20px
$h1=30px
$h2=20px

@keyframes fadeIn
  0% {
    opacity 0
  }

  100% {
    opacity 1
  }

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0,0, -15deg);
    transform-origin: 50% 0;
    animation-timing-function: ease-in;
  }

  to {
    transform-origin: 50% 0;
    transform: perspective(400px);
  }
}

@keyframes slideInRight {
  from {
  	opacity: 0.3;
    transform: translate3d(5px, 0, 0);
  }

  to {
  	opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
  	opacity: 0.3;
    transform: translate3d(-5px, 0, 0);
  }

  to {
  	opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
  	opacity: 0;
    transform: translate3d(0, 5px, 0);
    visibility: hidden;
  }

  to {
  	opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
